<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form :inline="true" :model="queryParams">
      <!--          <el-form-item label="名称">-->
      <!--            <el-input v-model="queryParams.productname" placeholder="商品名称" size="small"/>-->
      <!--          </el-form-item>-->
      <el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="fetchData">刷新</el-button>
          <!--              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
          <el-button
            type="primary"
            size="mini"
            @click="syncWx"
          >重新查重(请不要频繁点击)
          </el-button>
        </el-form-item>
      </el-form-item>
    </el-form>

    <!-- 操作 -->
    <el-row :gutter="10" class="toolbar">
      <el-col :span="1.5">

      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      stripe
      border
      fit
      highlight-current-row
      :row-key="row=>row.userId"
      :expand-row-keys="expandedRowKeys"
      @expand-change="fetchGroupList"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <template v-if="props.row && props.row.groups&&props.row.groups.length">
            <el-table
              :data="props.row.groups"
              :loading="props.row.loading"
              style="width: 100%"
            >
              <el-table-column prop="chatName" label="群名称"/>
              <el-table-column prop="chatId" label="群ID"/>
              <el-table-column prop="createTime" label="加群时间"/>
            </el-table>
          </template>
          <span v-else>暂无数据</span>
        </template>
      </el-table-column>
      <el-table-column prop="nickName" label="昵称"/>
      <el-table-column prop="userId" label="用户ID"/>
      <el-table-column prop="count" label="已加群数量"/>
    </el-table>

    <!-- 页码 -->
    <!-- 分页组件 -->
    <!--    <el-pagination-->
    <!--      class="page"-->
    <!--      :current-page="queryParams.pageNum"-->
    <!--      :page-sizes="[10, 20, 30, 40]"-->
    <!--      :page-size="queryParams.pageSize"-->
    <!--      layout="total, sizes, prev, pager, next, jumper"-->
    <!--      :total="total"-->
    <!--      @size-change="handleSizeChange"-->
    <!--      @current-change="handleCurrentChange"-->
    <!--    />-->

  </div>
</template>

<script>
import { getGroupchat, getRepeatUserList, getUserGroup } from '@/api/wxuser'

export default {
  data() {
    return {
      list: [],
      listLoading: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productname: null,
        startTime: null,
        endTime: null
      },
      total: 0, // 总条目数
      expandedRowKeys: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    resetQuery() {
      this.queryParams.pageNum = 1
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getRepeatUserList(this.queryParams).then(response => {
        this.list = response.data || []
        // this.total = +response.totalElement
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.fetchData()
    },
    syncWx() {
      getGroupchat().then(res => {
        this.$message.success('同步成功')
        this.fetchData()
      })
    },
    async fetchGroupList(row, expandedRows) {
      if (!expandedRows.includes(row)) {
        return
      }
      this.$set(row, 'groups', [])
      this.$set(row, 'loading', true)
      try {
        const res = await getUserGroup(row.userId)
        this.$set(row, 'groups', res.data)
        this.$set(row, 'loading', false) // 结束加载
      } catch (error) {
        console.error('获取群聊列表失败', error)
      } finally {
        this.$set(row, 'loading', false) // 结束加载
      }
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.list-img {
  height: 100px;
}

.toolbar {
  margin: 20px;
}

.page {
  margin: 20px;
}
</style>
